<div class="left-p">
    <div class="tab-p">
        <div class="tab-item" [ngClass]="{'select': curTabIndex == 0}" (click)="tabChanged(0)">部门列表</div>
        <div class="tab-item" [ngClass]="{'select': curTabIndex == 1}" (click)="tabChanged(1)">角色列表</div>
    </div>
    <div class="list" *ngIf="curTabIndex == 0">
        <div class="list-item" [ngClass]="{'select': curDepartment?.id == item.id}" *ngFor="let item of departmentList"
            (click)="selectDepartment(item)">
            <span>{{item.nodeName}}</span>
            <i *ngIf="curDepartment?.id == item.id" nz-icon nzType="caret-right" nzTheme="outline"></i>
        </div>
    </div>

    <div class="list" *ngIf="curTabIndex == 1">
        <div class="list-item" [ngClass]="{'select': curRole?.id == item.id}" *ngFor="let item of roles"
            (contextmenu)="contextMenu($event, menu)" (click)="selectRole(item)">
            <span *ngIf="!item.isEdit">{{item.name}}</span>
            <div style="display: flex;align-items: center;" *ngIf="item.isEdit">
                <input nz-input [placeholder]="item.name" (keyup)="($event.which === 13) ? renameOk(item) : 0"
                    nzBorderless [(ngModel)]="item.name" />
                <div class="spacer"></div>
                <i nz-icon nzType="close-circle" nzTheme="fill" (click)="cancelRename(item)"></i>
            </div>
            <i *ngIf="curRole?.id == item.id" nz-icon nzType="caret-right" nzTheme="outline"></i>
            <nz-dropdown-menu #menu="nzDropdownMenu">
                <ul nz-menu>
                    <li nz-menu-item>
                        <a nz-button nzType="link" style="width: 130px;
                        text-align: left;" (click)="rename(item)">
                            <i nz-icon nzType="edit" nzTheme="outline"></i>
                            重命名</a>
                    </li>
                    <li nz-menu-item>
                        <a nz-button nzType="link" style="width: 130px;
                        text-align: left;" (click)="delRole(item)">
                            <i nz-icon nzType="delete" nzTheme="outline"></i>
                            删除角色</a>
                    </li>
                </ul>
            </nz-dropdown-menu>
        </div>
        <button nz-button nzType="dashed" nzSize="large" style="width: 100%;margin-top: 51px;" (click)="addRole()">
            <i nz-icon nzType="plus-square" nzTheme="fill"></i>
            新增角色</button>
    </div>
</div>